<link rel="stylesheet" href="/assets/home/plugins/mescroll/mescroll.min.css">
<link rel="stylesheet" href="/assets/home/css/coupon_list.css" />

<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">优惠券</h1>
</header>

<!-- 占位 -->
<div style="height: 50px;"></div>

<div id="coupon" class="mescroll">
    <div class="coupon_list">

    </div>
</div>

<script src="/assets/home/plugins/mescroll/mescroll.min.js"></script>
<script>
    // 实例化插件
    let meScroll = new MeScroll('coupon', {
        // 下拉刷新
        down: {
            auto: false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: downCallback // 下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        // 上拉加载
        up: {
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            toTop: { //配置回到顶部按钮
                duration: 1000,
                src: "/assets/home/images/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                offset: 100
            }
        }
    });

    async function downCallback() {

        meScroll.resetUpScroll();
        $('#coupon .coupon_list').empty();
        return false;
    }

    async function UpCallback(page) {
        let data = {
            page: page.num,
            limit: page.size,
        }

        let result = await POST({
            url: 'coupon/index',
            params: data
        });
        // console.log(result);
        // console.log(result.data.list);

        if (result.code === 1) {
            let list = result.data.list;
            let count = result.data.count;
            // console.log(list);
            // console.log(count);

            meScroll.endBySize(list.length, count); //满足条件后不在下拉刷新

            fetchList(list);

            $('.btnlq').on('click', async function () {
                var $btn = $(event.target);
                let value = $btn.val();
                
                let result = await POST({
                    url: 'coupon/btn',
                    params: {
                        receive: 1,
                        values: value
                    }
                });
                // console.log(result);
                if (result.code === 1) {
                    $(this).removeClass("mui-btn-primary").addClass("mui-btn-danger").text("已领取");
                    mui.toast("领取成功");
                } else {
                    mui.toast("领取失败");
                }
            });

        } else {
            meScroll.endBySize(0, 0);
            mui.toast(result.msg);
            return false;
        }
    }


    function fetchList(list = []) {
        if (list.length > 0) {
            let Item = '';
            for (let item of list) {
                Item = `<div class="coupon_item">
                    <div class="item_content">
                        <a href="{:url('/home/coupon/info')}?cid=${item.id}">
                            <div class="left">
                                ${item.rate * 100}<span>折</span>
                            </div>
                            <div class="right">
                                <div>${item.title}</div>
                                <div>活动开始时间：${item.createtime_text}</div>
                                <div>活动结束时间：${item.endtime_text}</div>
                                <div>领取数量：${item.total} 张 每人限领1张</div>
                            </div>
                        </a>
                    </div>
                    <div class="item_btn">
                        <button class="btn ${item.receive_status === true ? 'mui-btn-danger' : 'mui-btn-primary'} ${item.receive_status === false ? 'btnlq' : ''}" value="${item.id}">${item.receive_status === true ? '已领取' : '领取'}</button>
                    </div>
                </div>`;
                $('#coupon .coupon_list').append(Item);
                // console.log(item);
            }
        }
    }
</script>